import { CloseSvg, EditSvg } from "@/app/assets/CustomizeSvg";
import { ChangeEvent, useEffect, useState } from "react";
import { message } from "antd";
import { DataSetModal } from "@/service/request/modal/dataModal";
import { ResponsePageModal } from "@/service/request/modal/responseModal";
import { updateDatasetName } from "@/service/request/requestApi";

const RenameModal = ({open,data,setOpen,callback}:{open: boolean,data: DataSetModal | undefined,setOpen: (open: boolean) => void,callback?: (param?: any) => void}) => {
    const [rename, setRename] = useState<string>('');

    useEffect(() => {
        if (open) {
            Initialize();
        } else {
            Dispose();
        }
    },[open]);

    const Initialize = () => {
        if (!data) {
            closeModal();
        }
        setRename(data?.name || "");
    }

    const Dispose = () => {
        setRename('');
    }

    const closeModal = () => {
        setOpen(false);
    }

    const handleValueChange = (e: ChangeEvent<HTMLInputElement>) => {
        setRename(e.target.value);
    }

    const submit = () => {
        if (!rename) return;
        if (!data || !data._id) {
            message.error("id不能为空");
            return;
        }
        const param = {
            id: data._id,
            newName: rename
        }
        updateDatasetName(param).then((res: ResponsePageModal<boolean>) => {
            if (res.code === 200 && res.success && res.result) {
                message.success("修改成功");
                if (callback) callback();
                closeModal();
            }
        }).catch((err) => {
            console.log("修改失败",err);
        });
    }
    return (<>
            <div className="fixed top-0 left-0 w-screen h-screen bg-black/20" style={{
                display: open? 'block': 'none'
            }}
            // onClick={closeModal}
            >
                <div className="w-fit mx-auto mt-16 bg-white rounded-xl text-black" onClick={(event) => {event.stopPropagation()}}>
                    <div className="w-full py-3 px-6 flex flex-row items-center justify-between bg-gray-100 rounded-ss-xl rounded-se-xl">
                        <div className="w-fit flex flex-row items-center justify-start gap-3 text-base">
                            <div className="text-blue-500 w-4 h-4 flex flex-row items-center justify-center"><EditSvg width={`100%`} height={`100%`} /></div>
                            <div>重命名</div>
                        </div>
                        <div className="w-8 h-8 p-1 transition-all duration-300 text-gray-600 hover:rotate-90 hover:bg-gray-300 rounded-lg" onClick={closeModal}>
                            <CloseSvg width={`100%`} height={`100%`} />
                        </div>
                    </div>
                    <div className="py-3 px-6">
                        <div>
                            <div 
                            className="w-96 h-10 py-2 px-4 rounded-lg border border-gray-200 shadow-[0_0_5px_rgb(96,165,250,0.1)] shadow-transparent hover:border-blue-400 has-[input:focus-within]:border-blue-400 has-[input:focus-within]:shadow-blue-400"><input type="text" value={rename} className="border-none outline-none w-full h-full" onChange={(e) => {handleValueChange(e)}} /></div>
                        </div>
                        <div className="w-full mb-2 flex flex-row items-center justify-end gap-4 mt-6">
                            <div className="cursor-pointer px-5 py-2 rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-400" onClick={closeModal}>关闭</div>
                            <div className="cursor-pointer px-5 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-500/80" onClick={submit}>确认</div>
                        </div>
                    </div>
                </div>
            </div>
        </>);
}

export {
    RenameModal
}